<template>
    <div class="register-bg">
        <div class="register-container">
            <div class="register-card">
                <div class="register-title">用户注册</div>
                <div class="register-subtitle">User Registration</div>

                <el-form :model="form" :rules="rules" ref="formRef" class="register-form" label-width="100px">
                    <!-- 基本信息 -->
                    <div class="form-section">
                        <div class="section-title">基本信息</div>

                        <el-form-item label="用户名" prop="UserName">
                            <el-input v-model="form.UserName" placeholder="请输入用户名" />
                        </el-form-item>

                        <el-form-item label="密码" prop="Password">
                            <el-input v-model="form.Password" type="password" placeholder="请输入密码" show-password />
                        </el-form-item>

                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"
                                show-password />
                        </el-form-item>

                        <el-form-item label="真实姓名" prop="RealName">
                            <el-input v-model="form.RealName" placeholder="请输入真实姓名" />
                        </el-form-item>

                        <el-form-item label="手机号" prop="Phone">
                            <el-input v-model="form.Phone" placeholder="请输入手机号" />
                        </el-form-item>

                        <el-form-item label="邮箱" prop="Email">
                            <el-input v-model="form.Email" placeholder="请输入邮箱" />
                        </el-form-item>
                    </div>

                    <!-- 扩展信息 -->
                    <div class="form-section">
                        <div class="section-title">扩展信息</div>

                        <el-form-item label="性别" prop="Gender">
                            <el-radio-group v-model="form.Gender">
                                <el-radio label="男">男</el-radio>
                                <el-radio label="女">女</el-radio>
                                <el-radio label="保密">保密</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="出生日期" prop="Birthday">
                            <el-date-picker v-model="form.Birthday" type="date" placeholder="选择出生日期" />
                        </el-form-item>

                        <el-form-item label="所在城市" prop="City">
                            <el-input v-model="form.City" placeholder="请输入所在城市" />
                        </el-form-item>

                        <el-form-item label="职业" prop="Occupation">
                            <el-input v-model="form.Occupation" placeholder="请输入职业" />
                        </el-form-item>

                        <el-form-item label="个性签名" prop="PersonalSignature">
                            <el-input v-model="form.PersonalSignature" type="textarea" :rows="3"
                                placeholder="请输入个性签名" />
                        </el-form-item>
                    </div>

                    <el-form-item class="register-actions">
                        <el-button type="primary" @click="onRegister" :loading="loading">注册</el-button>
                        <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-form>

                <div class="register-footer">
                    已有账号？<a class="register-link" @click="goToLogin">返回登录</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { register } from '@/api/user'; // 假设在user.ts中添加注册API

const router = useRouter();
const formRef = ref();
const loading = ref(false);

// 表单数据
const form = reactive({
    UserName: '',
    Password: '',
    confirmPassword: '',
    RealName: '',
    Phone: '',
    Email: '',
    IsEnabled: true, // 默认启用
    Gender: '保密',
    Birthday: '',
    City: '',
    Occupation: '',
    PersonalSignature: '',
    MembershipLevel: '普通会员', // 默认会员级别
    UserTags: '', // 默认为空
    RegistrationChannel: '网站注册' // 默认注册渠道
});

// 表单验证规则
const rules = {
    UserName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度应为3-20个字符', trigger: 'blur' }
    ],
    Password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule: any, value: string, callback: any) => {
                if (value !== form.Password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    RealName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
    Phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    Email: [
        { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '邮箱格式不正确', trigger: 'blur' }
    ]
};

// 注册方法
const onRegister = async () => {
    await formRef.value.validate(async (valid: boolean) => {
        if (!valid) return;

        try {
            loading.value = true;

            // 准备注册参数，移除确认密码字段
            const registerData = { ...form };
            delete (registerData as any).confirmPassword;

            // 调用注册API
            const response = await register(registerData) as any;

            if (response.IsSuc) {
                ElMessage.success('注册成功！请登录');
                router.push('/login');
            } else {
                ElMessage.error(response.Msg || '注册失败');
            }
        } catch (error: any) {
            console.error('注册失败:', error);
            ElMessage.error(error.message || '注册失败，请稍后再试');
        } finally {
            loading.value = false;
        }
    });
};

// 取消注册
const onCancel = () => {
    router.push('/login');
};

// 返回登录页
const goToLogin = () => {
    router.push('/login');
};
</script>

<style scoped>
.register-bg {
    min-height: 100vh;
    background: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1500&q=80') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-container {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 40px 0;
}

.register-card {
    width: 600px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
    padding: 40px 36px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.register-title {
    font-size: 26px;
    font-weight: bold;
    color: #222;
    text-align: center;
    margin-bottom: 6px;
}

.register-subtitle {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-bottom: 24px;
}

.register-form {
    margin-bottom: 8px;
}

.form-section {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #409EFF;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.register-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.register-footer {
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

.register-link {
    color: #409EFF;
    cursor: pointer;
}

@media (max-width: 650px) {
    .register-card {
        width: 95vw;
        padding: 24px 16px 16px 16px;
    }
}
</style>